<template>
	<div class="mask" @touchmove.prevent v-if="isShowLoading">
		<div class="loading">
			<svg class="circular" viewBox="25 25 50 50">
				<circle
					class="circular-path"
					cx="50"
					cy="50"
					r="20"
					fill="none"
					stroke-width="3"
					stroke-miterlimit="10"
				></circle>
			</svg>
			<p class="loading-text">{{content}}</p>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'loading',
    components: {},
    props: {},
    data() {
      return {
        isShowLoading: false,
        content: ''
      }
    },
    watch: {},
    computed: {},
    methods: {},
    created() {},
    mounted() {}
  }
</script>
<style lang="scss" scoped>
	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		padding: 20px;
		display: inline-block;
		background-color: rgba(150, 150, 150, 0.1);
		border-radius: 5px;
		text-align: center;
		.loading {
			position: relative;
			margin: 0 auto;
			width: 100px;
			padding: 30px;
			background-color: #fff;
			&:before {
				content: "";
				display: block;
				padding-top: 100%;
			}
		}
		.circular {
			animation: rotate 2s linear infinite;
			height: 80%;
			transform-origin: center center;
			width: 80%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin:0 auto;
			@at-root #{&}-path {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
				// animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
				animation: dash 1.5s ease-in-out infinite;
				stroke: #26a2ff;
				stroke-linecap: round;
			}
		}
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}

	// @keyframes color {
	//   100%,
	//   0% {
	//     stroke: #d62d20;
	//   }
	//   40% {
	//     stroke: #0057e7;
	//   }
	//   66% {
	//     stroke: #008744;
	//   }
	//   80%,
	//   90% {
	//     stroke: #ffa700;
	//   }
	// }
</style>
